<template>
	<view class="mInput">
			<input class="inputCont" :placeholder='placeholder' :disabled="disabled" :maxlength="maxlength" @focus="onFocus" @blur="onBlur"
				@input="onInput" v-model="currentValue" />
	</view>
</template>

<script>
	export default {
		name: "mInput",
		data() {
			return {
				show: false,
				currentValue: this.value,
				Thousandth: '',
				realValue: ''
			}
		},
		props: {
			negative: {
				default: false
			},
			thousand: {
				default: true
			},
			value: {
				default: ''
			},
			maxlength: {
				default: '18'
			},
			disabled: {
				default: false
			},
			placeholder: {
				default: ''
			}
		},
		computed: {

		},
		watch: {
			value: function(val) {
				console.log('this.value监听', val)


				if (val === null || val === NaN || val === 'NaN' || val === '') {
					val = ''
				}
				if (val.length > 1 && val[0] == 0 && val[1] != '.') {
					//debugger
					val = Number(val) + ''
				}
				if (val[0] == '.') {
					val = ''
				}
				//debugger
				val = val + ''
				if (this.negative) {
					val = val.replace(/[^\d.-]/g, "")
					val = val.replace(/[^\0-9\.-]/g, '')
					val = val.replace("-", "$#$").replace(/\-/g, "").replace("$#$", "-");
					let l = val.split("")
					let t = ''
					for (let i = 0; i < l.length; i++) {
						if (l[i] == '-' && i != 0) {
							l[i] = ''
						}
						t += l[i]
					}
					val = t
				} else {
					val = val.replace(/[^\d.]/g, "")
					val = val.replace(/[^\0-9\.]/g, '')
				}

				val = val.replace(/\.{2,}/g, ".");
				val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
				val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
				//千分位格式处理
				if (this.thousand) {
					this.currentValue = this.toThousands(val)
				} else {
					this.currentValue = val
				}
				
				this.realValue = val

				//this.$emit('input', val)
			},


		},
		mounted() {
			this.currentValue = this.value
			if (this.thousand) {
				if (this.value === null || this.value === '' || this.value === undefined) {
					this.currentValue = ''
				}
				this.currentValue = this.toThousands(this.value)
			}
		},
		methods: {
			onInput(e) {
				//console.log(e.target.value)
				let val = e.target.value + ''
				if (this.negative) {
					val = val.replace(/[^\d.-]/g, "")
					val = val.replace(/[^\0-9\.-]/g, '')
					val = val.replace("-", "$#$").replace(/\-/g, "").replace("$#$", "-");
					let l = val.split("")
					let t = ''
					for (let i = 0; i < l.length; i++) {
						if (l[i] == '-' && i != 0) {
							l[i] = ''
						}
						t += l[i]
					}
					val = t
				} else {
					val = val.replace(/[^\d.]/g, "")
					val = val.replace(/[^\0-9\.]/g, '')
				}

				val = val.replace(/\.{2,}/g, ".");
				val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
				val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
				
				setTimeout(()=>{
					this.currentValue = val
					
				},10)
 
				
			},
			onFocus(e) {
				//console.log(e.target.value)
				let val = e.target.value + ''
				if (this.negative) {
					val = val.replace(/[^\d.-]/g, "")
					val = val.replace(/[^\0-9\.-]/g, '')
					val = val.replace("-", "$#$").replace(/\-/g, "").replace("$#$", "-");
					let l = val.split("")
					let t = ''
					for (let i = 0; i < l.length; i++) {
						if (l[i] == '-' && i != 0) {
							l[i] = ''
						}
						t += l[i]
					}
					val = t
				} else {
					val = val.replace(/[^\d.]/g, "")
					val = val.replace(/[^\0-9\.]/g, '')
				}

				val = val.replace(/\.{2,}/g, ".");
				val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
				val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')

				this.currentValue = val

			},
			onBlur(e) {
				console.log(e.target.value)

				if (this.thousand) {
					this.currentValue = this.toThousands(e.target.value)
				}
				//this.$emit('blur', this.realValue)
				this.$emit('input', e.target.value)
			},
			thouClick() {
				this.show = true
			}

		}

	}
</script>

<style lang="scss" scoped>
	.mInput {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		box-sizing: border-box;

		.Thousandth {
			width: 100%;
			height: 4.5rem;
			line-height: 4.5rem;
			font-size: 3rem;
			//padding: 0 2rem;
			text-align: left;
		}

		.inputCont {
			width: 100%;
			height: 4.5rem;
			font-size: 3rem;
			padding: 0 2rem;
		}
	}
</style>
